<!-- 首页 -->
<template>
	<view>
		
		<!-- 搜索框 -->
<!-- 		<view :style="{ height: navHeight + 'px'}" class="back-color">
			<view style="position: absolute; top: 48px; left: 50%; transform: translate(-50%, 0); height: 30px; width: 50%;">
				<input style="width: 100%; height: 100%; border-radius: 8px; border: 2rpx solid #d0d0d0; padding-left: 20px;" placeholder="点击搜索">
					
				</input>
			</view>
		</view> -->
		<view>
			<!-- 顶部自定义导航 -->
			<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="tn-main-gradient-pink">
			  <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
			    <!-- 返回按钮 -->
			    <view class="custom-nav__back">
			      <view class="tn-icon-menu" style="font-size: 40rpx; margin-right: 20rpx;"></view>
			    </view>
			    <!-- 搜索框 -->
			    <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
			      <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-gray--dark tn-bg-white">
			        <view class="custom-nav__search__icon tn-icon-search"></view>
			        <view class="custom-nav__search__text tn-padding-right">点击搜索</view>
			      </view>
			    </view>
			  </view>
			</tn-nav-bar>
		</view>

		<view class="tn-margin-left tn-margin-right tn-margin-top-lg" :style="{paddingTop: vuex_custom_bar_height - 10 + 'px'}">
		</view>
		
		<!-- 通知栏 -->
		<div style="margin-bottom: 14rpx;">
			<tn-notice-bar :list="list" mode="vertical"></tn-notice-bar>
		</div>

		
		<!-- 轮播图 -->
		<tn-swiper :list="images" :effect3d="true"></tn-swiper>
		
		<!-- 中间内容区 -->
		<div  style="margin: 30rpx 0; position: relative; top: 10rpx;">
			<tn-grid align="center" :col="col">
			  <block v-for="(item, index) in 5" :key="index">
				<tn-grid-item :style="{width: gridItemWidth}">
				  <view style="width: 100rpx; height: 150rpx; text-align: center; color: #595959; font-size: smaller">
					  <img style="width: 100%; height: 100rpx;" src="https://img.zcool.cn/community/011f745be13ad0a8012092527c718e.jpg@2o.jpg"/>
					爱心求助
				  </view>
				</tn-grid-item>
			  </block>
			</tn-grid>
		</div>

		<tn-tabs style="position: relative; top: 1rpx;" :list="tabs" :isScroll="false" :current="current" name="name" @change="change" activeColor="#EC808D">
			
		</tn-tabs>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
				  'TuniaoUI现已发布V1.0.0',
				  '今天天气晴朗，适合处理bug',
				  'TuniaoUIV2.0.0即将发布',
				  '今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
				],
				images: [
					{image: 'https://resource.tuniaokj.com/images/swiper/spring.jpg', title: '春天'},
					{image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg', title: '夏天'},
					{image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg', title: '秋天'},
					{image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg', title: '冬天'},
				],
				tabs: [{
				  name: '领养'
				}, {
				  name: '暂养'
				}],
				navHeight: 0,
				customTop: 0,
				customHeight: 0,
				current: 0,
				col: 5,
			}
		},
		computed: {
		  // 兼容小程序
		  gridItemWidth() {
			return 100 / this.col + '%'
		  }
		},
		onLoad() {
			let custom = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
			let system = uni.getSystemInfoSync(); // 获取设备信息
			this.navHeight = system.statusBarHeight + 44; // 导航栏的高度
			this.customTop = custom.top; // 胶囊按钮与顶部的距离
			this.customHeight = custom.height; // 胶囊按钮与右侧的距离
			console.log(custom)
		},
		methods: {
		  change(index) {
			this.current = index;
		  }
		}
	}
</script>

<style scoped lang="scss">	
	
	/* 自定义导航栏内容 start */
	.custom-nav {
	  height: 100%;
	  
	  &__back {
	    margin: auto 5rpx;
	    font-size: 40rpx;
	    margin-right: 10rpx;
	    margin-left: 30rpx;
	    flex-basis: 5%;
	  }
	  
	  &__search {
	    flex-basis: 60%;
	    width: 100%;
	    height: 100%;
	    
	    &__box {
	      width: 100%;
	      height: 70%;
	      padding: 10rpx 0;
	      margin: 0 30rpx;
	      border-radius: 60rpx 60rpx 0 60rpx;
	      font-size: 24rpx;
	      background-color: rgba(255,255,255,0.2);
	    }
	    
	    &__icon {
	      padding-right: 10rpx;
	      margin-left: 20rpx;
	      font-size: 30rpx;
	    }
	    
	    &__text {
	    }
	  }
	}
	/* 自定义导航栏内容 end */
</style>
